<template>
  <view class="myAppointmentsInfo-page">
    <NavBar title="就诊人" />

    <view class="body">
      <view class="block">
        <view class="row">
          <view class="row-item">
            <view class="required">*</view>
            <view class="label">姓名</view>
          </view>

          <view class="row-input">
            <input
              class="input"
              type="text"
              placeholder="请输入姓名"
              v-model="formData.patientName"
            />
          </view>
        </view>

        <view class="row">
          <view class="row-item">
            <view class="label">性别</view>
          </view>

          <view class="row-radios">
            <view
              class="radio"
              :class="{ active: formData.patientGender === '1' }"
              @tap="formData.patientGender = '1'"
              >男</view
            >
            <view
              class="radio"
              :class="{ active: formData.patientGender === '2' }"
              @tap="formData.patientGender = '2'"
              >女</view
            >
          </view>
        </view>

        <view class="row">
          <view class="row-item">
            <view class="required">*</view>
            <view class="label">身份证号</view>
          </view>

          <view class="row-input">
            <input
              class="input"
              type="text"
              placeholder="请输入身份证号"
              v-model="formData.idCard"
            />
          </view>
        </view>

        <view class="row">
          <view class="row-item">
            <view class="label">阴历生日</view>
          </view>

          <picker
            mode="date"
            header-text="阴历生日"
            @change="onSolarBirthdayChange"
            :start="'1900-01-01'"
            :end="dayjs().format('YYYY-MM-DD')"
          >
            <view class="row-date">
              <view class="date">{{ formData.solarBirthday }}</view>
              <Image class="arrow" :src="ArrowRight" />
            </view>
          </picker>
        </view>

        <view class="row">
          <view class="row-item">
            <view class="label">阳历生日</view>
          </view>

          <picker
            mode="date"
            header-text="阳历生日"
            @change="onLunarBirthdayChange"
            :start="'1900-01-01'"
            :end="dayjs().format('YYYY-MM-DD')"
          >
            <view class="row-date">
              <view class="date">{{ formData.lunarBirthday }}</view>
              <Image class="arrow" :src="ArrowRight" />
            </view>
          </picker>
        </view>
      </view>
    </view>

    <view class="footer">
      <view class="btn" @tap="handleSave">
        <text class="text">保存</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import NavBar from "../../components/NavBar.vue";
import dayjs from "dayjs";
import Taro, { useReady, useRouter } from "@tarojs/taro";
import { ref } from "vue";
import { addPatient, updatePatient } from "../../api/user.api";
import ArrowRight from "../../assets/images/my_arrow.png";
import { useUserStore } from "../../stores/userStore";
import { regExp } from "../../utils/valid.util";
import { safeNavigateBack } from "../../utils/navigation.util";

const router = useRouter();
const userState = useUserStore();
const id = ref<number>();
const formData = ref<{
  patientName: string;
  patientGender: string;
  idCard: string;
  solarBirthday: string;
  lunarBirthday: string;
}>({
  patientName: "",
  patientGender: "1",
  idCard: "",
  solarBirthday: dayjs().format("YYYY-MM-DD"),
  lunarBirthday: dayjs().format("YYYY-MM-DD"),
});
const loading = ref(false);

const handleSave = async () => {
  if (loading.value) return;

  try {
    loading.value = true;

    // 姓名不能为空
    if (!formData.value.patientName) {
      Taro.showToast({
        title: "请输入姓名",
        icon: "none",
      });
      return;
    } else {
      // 必须是中文
      if (!regExp.name.test(formData.value.patientName)) {
        Taro.showToast({
          title: "姓名必须是中文",
          icon: "none",
        });
        return;
      }
      // 长度不能超过10个字符
      if (formData.value.patientName.length > 15) {
        Taro.showToast({
          title: "姓名长度不能超过10个字符",
          icon: "none",
        });
        return;
      }
    }

    // 身份证号不能为空
    if (!formData.value.idCard) {
      Taro.showToast({
        title: "请输入身份证号",
        icon: "none",
      });
      return;
    } else {
      // 身份证号格式不正确
      if (!regExp.idCard.test(formData.value.idCard)) {
        Taro.showToast({
          title: "身份证号格式不正确",
          icon: "none",
        });

        return;
      }
    }

    const res = await (id.value
      ? updatePatient({
          cmPatientId: id.value,
          patientName: formData.value.patientName,
          patientGender: formData.value.patientGender,
          idCard: formData.value.idCard,
          solarBirthday: formData.value.solarBirthday,
          lunarBirthday: formData.value.lunarBirthday,
        })
      : addPatient({
          patientName: formData.value.patientName,
          patientGender: formData.value.patientGender,
          idCard: formData.value.idCard,
          solarBirthday: formData.value.solarBirthday,
          lunarBirthday: formData.value.lunarBirthday,
        }));

    if (res.code === "200") {
      await userState.getPatientListApi();

      if (router.params.type === "doctorAdd") {
        // 设置为默认就诊人
        if (userState.patientList.length) {
          userState.currentPatient = userState.patientList[0];
        }
      }

      Taro.showToast({
        title: "保存成功",
        icon: "success",
      });

      safeNavigateBack();
    } else {
      Taro.showToast({
        title: res.msg,
        icon: "none",
      });
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

// 阳历生日选择
const onSolarBirthdayChange = (e: any) => {
  formData.value.solarBirthday = e.detail.value;
};

// 阴历生日选择
const onLunarBirthdayChange = (e: any) => {
  formData.value.lunarBirthday = e.detail.value;
};

useReady(() => {
  if (router.params.id) {
    id.value = Number(router.params.id);
  }

  const findPatient = userState.patientList.find(
    (item) => item.cmPatientId === id.value
  );

  if (findPatient) {
    formData.value = {
      patientName: findPatient.patientName,
      patientGender: findPatient.patientGender,
      idCard: findPatient.idCard,
      solarBirthday: findPatient.solarBirthday,
      lunarBirthday: findPatient.lunarBirthday,
    };
  }
});
</script>

<style lang="scss">
.myAppointmentsInfo-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #ffffff;

  .logo-container {
    flex-shrink: 0;
    width: 100%;

    .logo-container-inner {
      padding-top: 11px;
      padding-left: 16px;

      .close {
        width: 22px;
        height: 22px;
      }
    }
  }

  .body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: #f1f5f8;
    overflow-y: auto;

    .block {
      width: 100%;
      height: 272px;
      padding: 5px 10px;
      background: #ffffff;
      border-radius: 12px;

      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 0px;
        border-bottom: 1px solid #f5f6fa;

        .row-item {
          display: flex;
          align-items: center;
          gap: 2px;

          .required {
            font-weight: 400;
            font-size: 14px;
            color: #d90000;
            font-style: normal;
          }

          .label {
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }

        .row-input {
          flex: 1;
          padding-left: 30px;

          .input {
            width: 100%;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.9);
            text-align: right;
            font-style: normal;
          }
        }

        .row-radios {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 5px;

          .radio {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 24px;
            background: #f8f8f8;
            border-radius: 3px;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            text-align: center;
            font-style: normal;

            &.active {
              background: rgba(22, 173, 164, 0.08);
              border-radius: 3px 3px 3px 3px;
              border: 1px solid #16ada4;
              font-weight: 400;
              font-size: 14px;
              color: #16ada4;
              text-align: center;
              font-style: normal;
            }
          }
        }

        .row-date {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 8px;

          .date {
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.9);
            text-align: right;
            font-style: normal;
            text-transform: none;
          }

          .arrow {
            width: 22px;
            height: 22px;
          }
        }
      }
    }
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 30px 16px;
    background: #f7f8fc;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: 100%;
      height: 45px;
      background: #16ada4;
      border-radius: 30px 30px 30px 30px;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;

      .icon {
        font-size: 20px;
      }
    }
  }
}
</style>
